<template>
    <div class="ed-tree">
        <el-popover
                ref="popover"
                placement="bottom-start"
                trigger="click">
            <el-tree
                    :data="treeData"
                    :props="treeProps"
                    :node-key="treeProps.value"
                    @node-click="onClickNode"
                    highlight-current
                    style="min-width: 300px"
                    ref="tree">
            </el-tree>
            <el-input
                    slot="reference"
                    ref="input"
                    v-model="labelModel"
                    placeholder="请选择上级类型"
                    suffix-icon="el-icon-arrow-down">
            </el-input>
        </el-popover>
    </div>
</template>

<script>
    export default {
        name: "EdTreeData",
        // 树节点配置选项
        props: {
            // 需要回显的数据对象
            setObj:{
                type: Object,
                required: false
            },
            treeData:{
                type: Array,
                required: false,
            },
            treeProps:{
                type: Object,
                required: false,
                default: () => ({
                    parent: 'parentCodeId',   // 父级唯一标识
                    value: 'id',          // 唯一标识
                    label: 'dictName',
                    defaultPid: null,
                }),
            },
            value:{
                type: [String,Number],
                default:function () {
                    return '';
                }
            },
        },
        watch:{
            value(val){
                this.labelModel = val
            }
        },
        mounted(){

        },
        data(){
            return{
                labelModel:"",
            }
        },
        methods:{
            onClickNode(node) {
                this.$refs.popover.showPopper = false;
                this.labelModel = node.dictName;
                this.$emit('onclick',node);
            },
        }
    }
</script>

<style scoped>

</style>